import React, {FC, memo, ReactNode,useEffect,useState} from "react";
import { Heading, Table, Thead, Tbody, Tr, Th, Td, HStack, Icon, Box } from '@chakra-ui/react';
import Pagination from "@/components/Pagination";
import {Song} from "@/faker/songs/ranking-songs";
import {Image,Text} from "@chakra-ui/react";
import columns from "@/data/ranking-song-columns";
import { ChevronRightIcon } from "@chakra-ui/icons";
import { AddIcon, ChatIcon, CheckCircleIcon } from "@chakra-ui/icons";
import TextButtonWithChild from "@/components/TextButtonWithChild";
interface IProps {
    children?:ReactNode;
    currentPage: number;
    onPageChange: (page: number) => void;
    fetchSongs: (type: string) => Promise<Song[]>;
    showPagination: boolean;
    totalPages: number;
}

const buttonList = [
    {text:"添加", icon:<Icon as={AddIcon} mr={2}/>},
    {text:"收藏", icon:<Icon as={CheckCircleIcon} mr={2}/>},
    {text:"评论", icon:<Icon as={ChatIcon} mr={2}/>},
]

const rankingImages  = [
    'https://h5s.kuwo.cn/www/kw-www/img/icon_first.7afe2f1.png',
    'https://h5s.kuwo.cn/www/kw-www/img/icon_secondary.3095603.png',
    'https://h5s.kuwo.cn/www/kw-www/img/icon_third.4569f0e.png'

]

const Content :FC<IProps>  = ({fetchSongs, currentPage, onPageChange, showPagination=true,totalPages=1 }) =>{


    const [songsData,setSongsData] = useState<Song[]>([])

    useEffect(()=>{
        const loadSongs = async () => {
            const data = await fetchSongs('some-type');
            setSongsData(data);
        };
        loadSongs();
    },[fetchSongs]);

    return (
        <>
            <HStack>
               <Heading size="xl"   mt={6}>酷我飙升榜</Heading>
               <Text mt={10} fontWeight="normal"
               color="gray.500" fontSize="14px"
               >更新时间: 2025-01-19</Text>
            </HStack>
            <Box display="flex" gap={2}>
                    <TextButtonWithChild  w="150px">
                    <Icon as={ChevronRightIcon} mr={2}/>播放全部
                    </TextButtonWithChild>
                    {buttonList.map((item,index)=>(
                        <TextButtonWithChild 
                        w="110px"
                        key={index} colorScheme="gray.100">
                        {item.icon}{item.text}
                        </TextButtonWithChild>
                    ))}
                </Box>
            <Table size="sm" variant='striped'  mt={6}  fontSize="14px">
                <Thead bg="gray.50" h="46px">
                    <Tr>
                        {columns.map((title)=>(
                            <Th key={title.key}>{title.title}</Th>
                        ))}
                    </Tr>
                </Thead>
                <Tbody>
                    {songsData.map((item:Song,index) => (
                        <Tr key={item.id}  _hover={{bg:"gray.200"}}  >
                            <Td>                                
                                {index<=2 ? (
                                    <Image  flex="1" objectFit="contain"   src={rankingImages[index]}  w="10" h="10" />)
                                    :<Text  pl={4} flex="1"  fontSize="lg" fontWeight="bold" >{index+1}</Text>
                            }
                            </Td>
                            <Td>
                                <HStack spacing={2}>
                                    <Image src={item.picUrl} alt={item.name} width={50} height={50} />
                                    <Text>{item.name}</Text>
                                </HStack>
                            </Td>
                            <Td>{item.artist}</Td>
                            <Td>
                                <Text>{item.album.name}</Text>
                            </Td>
                            <Td>{item.duration}</Td>
                        </Tr>
                    ))}
                </Tbody>
            </Table>
            {showPagination && <Pagination   totalPages={totalPages} onPageChange={onPageChange} />}
        </>
    )
}

export default memo(Content)